<template>
	<view>
		<view class="img-block">
			<view class="upload-btn" :style="{ width: size, height: size }" v-for="(item, index) in value" :key="index">
				<image :src="item" class="bg-img" mode="aspectFill" @tap="previewImage(item, value)"></image>
				<view class="close-icon" @tap.stop="delAct" :data-index="index">
					<u-icon name="close" color="#FFFFFF" size="36rpx" @click="delAct"></u-icon>
				</view>
			</view>
			<view class="upload-btn" :style="{ width: size, height: size }" @click="uploadAct"
				v-if="display ? value.length < num && value.length > 0 : value.length < num">
				<view class="camera-tag">
					<u-icon name="camera-fill" color="rgba(102,102,104,0.5)" size="96rpx"></u-icon>
					<view class="upload-tip" v-if="uploadTip">{{ uploadTip }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import {
	uploadImg,
} from '@/api/common.js';
export default {
	props: {
		value: {
			type: Array,
			default: function () {
				return [];
			}
		},
		num: {
			type: Number,
			default: 9
		},
		display: {
			type: Boolean,
			default: !1
		},
		uploadTip: {
			type: String,
			default: '',
		},
		size: {
			type: String,
			default: '204rpx'
		}
	},
	watch: {
		value: {
			handler(val) {
				console.log(val)
			},
			deep: true
		}
	},
	data() {
		return {
			uploadIndex: 0,
			uploadTmp: [],
		}
	},
	created() {
		console.log()
	},
	methods: {
		delAct(e) {
			let index = parseInt(e.currentTarget.dataset.index);
			let photos = JSON.parse(JSON.stringify(this.value));
			photos.splice(index, 1);
			this.$emit('input', photos);
		},
		uploadAct() { //上传图片
			uni.chooseImage({
				count: this.num - this.value.length,
				success: (res) => {
					this.uploadTmp = res.tempFilePaths;
					uni.showLoading({
						title: '上传中',
						mask: true
					});
					this.upload();
				}
			});
		},
		upload() {
			if (this.uploadIndex == this.uploadTmp.length) {
				this.uploadIndex = 0;
				this.uploadTmp = [];
				uni.hideLoading();
				return;
			}
			uploadImg(this.uploadTmp[this.uploadIndex]).then(res => {
				this.uploadIndex = this.uploadIndex + 1;
				let photos = JSON.parse(JSON.stringify(this.value));
				photos.push(res);
				this.$emit('input', photos);
				this.upload();
			}).catch(res => {
				this.uploadIndex = this.uploadIndex + 1;
				this.upload();
			});
		},

		getType(item) {
			let fileExtension = "";
			if (item.lastIndexOf(".") > -1) {
				fileExtension = item.slice(item.lastIndexOf(".") + 1);
			}
			if (fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'jpeg' || fileExtension == 'gif') {
				return 0;
			} else {
				return 1;
			}
		}

	}
}
</script>

<style lang="scss">
.img-block {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 34rpx;

	.upload-btn {
		border-radius: 2rpx;
		box-sizing: border-box;
		background-color: #F7F7F7;
		position: relative;

		.bg-img {
			width: 100%;
			height: 100%;
			border-radius: 2rpx;
		}

		.close-icon {
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			width: 50rpx;
			height: 50rpx;
			background: #DF0E0E;
			border-radius: 0 0 0 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.camera-tag {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translateX(-50%) translateY(-50%);
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.upload-tip {
				font-size: 28rpx;
				color: #666668;
			}
		}
	}


}
</style>